<template>
	<div class="password">
		<el-input v-model="password" :maxlength="maxlength" :placeholder="placeholder" clearable type="password" show-password></el-input>
		<div class="password-progress">
			<div
				class="progress-item"
				:class="{
					active: complexity >= item,
					danger: complexity < 2,
					warning: complexity >= 2 && complexity < 4,
					success: complexity >= 4,
				}"
				v-for="item in 5"
				:key="item"
			></div>
		</div>
		<div class="tip">建议输入至少8位包含大写字母、小写字母、数字、特殊字符的组合字符串</div>
	</div>
</template>

<script>
export default {
	name: "password",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [String, Number],
			default: "",
		},
		placeholder: {
			type: String,
			default: "请输入密码",
		},
		maxlength: {
			type: [Number, String],
			default: 20,
		},
	},
	data() {
		return {}
	},
	computed: {
		password: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
		complexity() {
			let complexity = 0
			if (!this.password.length) {
				return complexity
			}
			if (this.password.match(/[a-z]/)) {
				complexity++
			}
			if (this.password.match(/[A-Z]/)) {
				complexity++
			}
			if (this.password.match(/[0-9]/)) {
				complexity++
			}
			if (this.password.match(/[^a-zA-Z0-9]/)) {
				complexity++
			}
			if (this.password.length > 5 && !this.password.match(/([a-zA-Z0-9])\1{2,}/)) {
				complexity++
			}

			return complexity
		},
	},
	created() {},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
.password-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	height: 32px;
	.progress-item {
		width: 20%;
		height: 7px;
		background-color: #c8c9cb;
		border-radius: 2px;
		position: relative;
		color: #c8c9cb;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			border-radius: 2px;
			transition: width 0.3s;
			background: currentColor;
		}
		&.active {
			&::before {
				width: 100%;
			}
			&.danger {
				color: #ff4949;
			}
			&.warning {
				color: #ff9c00;
			}
			&.success {
				color: #95de64;
			}
		}
	}
}

.tip {
	font-size: 12px;
	color: #808080;
	margin-top: 5px;
}
</style>
